<template>
  <div class="app-container">
    <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" @sureLoad="sureLoad"
                            @demoLoad="demoLoad"/>
    <!-- <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
        <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
    </el-table> -->

    <!-- 错误提示 -->

    <el-dialog title="错误提示" :visible.sync="dialogVisible" width="50%">

      <el-table :data="errList" style="width: 100%;padding:0">
        <el-table-column width="200" prop="pn" label="公开号">
        </el-table-column>
        <el-table-column prop="errorMessage" label="原因">
        </el-table-column>

      </el-table>

      <span slot="footer" class="dialog-footer">

            <el-button size="mini" type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  import UploadExcelComponent from '@/components/UploadExcel/index.vue'

  import {
    toUpload,
    getUploadResult
  } from '@/api/retrieval'

  export default {
    name: 'UploadExcel',
    components: {
      UploadExcelComponent
    },
    data() {
      return {
        tableData: [],
        tableHeader: [],
        file: null,
        dialogVisible: false,
        errList: []
      }
    },
    methods: {
      sureLoad() {
        this.$showLoading();

        let formData = new FormData(); //new一个formData事件
        formData.append("uploadFile", this.file); //将file属性添加到formData里
        toUpload(formData).then(res => {

          this.$hideLoading();

          getUploadResult(res.data.uploadId).then(res => {
            console.log("data" + res.data.code)
            let code = res.data.code;
            if (code === 1) {
              this.$message({
                message: '上传成功',
                type: 'success'
              });
            } else {
              this.dialogVisible = true
              this.errList = res.data.errList
            }
          })
        })
      },
      demoLoad() {
        window.open("./patent.xlsx", "_blank")

      },
      beforeUpload(file) {
        const isLt50M = file.size / 1024 / 1024 < 50

        if (isLt50M) {
          this.file = file
          return true
        }

        this.$message({
          message: 'Please do not upload files larger than 1m in size.',
          type: 'warning'
        })
        return false
      },
      handleSuccess({results, header}) {
        this.tableData = results
        this.tableHeader = header

        this.$message({
          message: '文件选中成功!',
          type: 'success'
        });
      }
    }
  }
</script>
